<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="cancel">
    <template slot="title">
      {{vipTableType==0?'批量修改VIP等级':'修改VIP等级'}}
    </template>
    <el-form :inline="true" :model="form" ref="refForm">
      <el-form-item label="VIP等级修改为" prop="level">
        <el-select v-model="form.level" placeholder="请选择等级">
          <el-option
            v-for="item in vipManage.VIP_LEVEL"
            :label="item.title"
            :key="item.value"
            :value="item.value"
            v-if="item.value!=-1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否锁定层级：" prop="lockStatus" >
        <el-checkbox v-model="form.lockStatus" :disabled="disable&&vipTableType==1">锁定</el-checkbox>
      </el-form-item>
    </el-form>
    <el-table
      class="el-table-align-center"
      :data="rowsData"
      border
      ref="table"
      v-loading="loading"
      max-height="250"
      element-loading-text="加载中..."
    @selection-change="handleSelectionChange">
    <el-table-column v-if="vipTableType==0"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="注册时间" prop="registerDate">
        <template slot-scope="{row}">
          {{ row.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="当前VIP等级" prop="vipLevel">
        <template slot-scope="{row}">
          {{ row.vipLevel | VIPlevel}}
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitModify" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { vipBtachUpdate } from '@/services/api/member';
import { form, grid } from '@/build';

export default {
  name: 'vip-level-table',
  props: ['dialogVisible', 'vipTableType', 'type', 'rows'],
  mixins: [form, grid],
  data() {
    return {
      rowsData: this.rows,
      usernames: [],
      form: {
        level: '',
        lockStatus: 0,
      },
      disable: false,
    };
  },
  filters: {
    VIPlevel(value) {
      return _.find(vipManage.VIP_LEVEL, { value }).title;
    },
  },

  methods: {
    cancel() {
      this.clearForm();
      this.$emit('cancel');
      this.$refs.table.clearSelection();
    },
    // 提交表单
    submitModify() {
      const usernameArr = this.usernames;
      // const username = _.join(usernameArr, ',');
      const { level } = this.form;
      if (!this.rowsData.length) {
        this.$message({
          type: 'warning',
          message: '没有可选择的用户',
        });
        return;
      }
      if (level === '') {
        this.$message({
          type: 'warning',
          message: '请选择等级',
        });
        return;
      }
      if (!this.usernames.length) {
        this.$message({
          type: 'warning',
          message: '请选择用户',
        });
        return;
      }
      this.form.lockStatus = this.form.lockStatus ? 1 : 0;
      this.doGet({ action: 'levelAdjust' });
    },
    handleSelectionChange(value) {
      this.usernames = [];
      _.each(value, (item) => {
        this.usernames.push(item.username);
      });
    },
    clearForm() {
      this.form = {
        level: '',
        lockStatus: 0,
      };
    },
  },
  mounted() {
    this.$nextTick(() => { // 默认表格全部选中
      this.rowsData.forEach((row) => {
        this.$refs.table.toggleRowSelection(row, true);
      });
    });
    if (this.vipTableType == 0) {
      this.$notify({ // 上个页面已过滤掉“已锁定”的vip
        type: 'success',
        message: '已过滤掉VIP状态为已锁定的用户',
      });
      // 去重,批量修改
      const obj = {};
      this.rowsData = this.rowsData.reduce((cur, next) => {
        obj[next.username] ? '' : obj[next.username] = true && cur.push(next);
        return cur;
      }, []);
    } else { // 单个修改，已锁定的默认不可解锁，需要通过批量解锁按钮操作
      this.form.lockStatus = !!this.rowsData[0].lockStatus;
      this.disable = !!this.form.lockStatus;
    }

    this.bindGet(vipBtachUpdate, '', {
      action: 'levelAdjust',
      beforeSend: data => ({
        usernames: this.usernames.join(','),
        level: this.form.level,
        lockStatus: this.form.lockStatus,
      }),
      callback: ([result, data]) => {
        if (result) {
          this.clearForm();
          this.$refs.table.clearSelection();
          this.$notify({
            type: 'success',
            message: this.vipTableType == 0 ? '批量修改VIP成功' : '修改VIP成功',
          });
        }
        this.cancel();
        this.$parent.getAll();
      },
    });
  },
};
</script>

<style scoped lang="scss">

</style>
